<template>
	<view class="contont">
		<view class="top_div">
			<text>单选题</text>
			<text>{{selIndex+1}}/{{dataList.length}}</text>
		</view>
		
		<list class="question_list" >
			<cell class="question_item"v-for="(item,index) in dataList" v-if="item.show" :key="item.id">
				<view class="question_title">
					{{item.title}}
				</view>
				  <list class="option_list">   
					<cell  v-for="(ite,ind) in item.optionsList"
					       :class="ind%2==0?'option_item option_item_active':'option_item'">
						   <text v-if="item.answerId.indexOf(ite.id)>-1" class="option_text1 succ_bg">{{ite.options}}</text>
						   <text v-else-if="item.myOptionId.indexOf(ite.id)>-1" class="option_text1 err_bg">{{ite.options}}</text>
						  <text v-else class="option_text1">{{ite.options}}</text>
						<text>{{ite.content}}</text>
					</cell>
				</list> 
			</cell>
		</list>
		
		 <view v-if="dataList[selIndex].succFlag" class="result_div">
				<image src="../../static/icon_hdzq.png"></image>
				<text>回答正确 </text>
		</view>  
		<!-- !dataList[selIndex].succFlag -->
		<view v-if="!dataList[selIndex].succFlag"  style="background: #e03725;" class="result_div">
				<image src="../../static/icon_hdcw.png"></image>
				<text>回答错误</text>
		</view>
		<view class="resu_view">
			<view class="resu_item">
				<view class="item_title">正确答案</view>
				 <text class="item_op" v-for="op in dataList[selIndex].optionsList">	
					  <text v-for="da in dataList[selIndex].answerId.split(',')">
						 <text v-if="da==op.id" >
						 	  {{op.options}}
						  </text>
					  </text>			 
				</text> 
			</view>
			
			 <view class="resu_item">
				<view>我的答案</view>
				<text class="item_op" v-for="op in dataList[selIndex].optionsList">
					  <text v-for="da in dataList[selIndex].myOptionId.split(',')" >
						 <text v-if="da==op.id" style="color: #e24130;">
						 	  {{op.options}}
						  </text>
					  </text>			 
				</text> 
				</view>
			<!-- <view class="resu_item">
				<view>正确答案</view>
				 <view v-for="op in dataList[selIndex].optionsList">					
					 <view v-if="dataList[selIndex].answerId==op.id" >
						 {{op.options}}
					 </view>
				</view> 
			</view>
			
			 <view class="resu_item">
				<view>我的答案</view>
				 <view v-for="op in dataList[selIndex].optionsList">
				<view v-if="dataList[selIndex].myOptionId==op.id" style="color: #e24130;">
				{{op.options}}
				</view>
				</view>
			</view> -->
		</view>
		
		<view class="answer_div">
			<view >参考解析：</view>
			<view>{{dataList[selIndex].analysis}}</view> 
		</view>
		<view class="note_div">
			<text class="list_text">学员笔记</text>
			<text class="add_text" @tap="addNote()">添加笔记</text>
		</view>
		<list class="note_list" >
			<cell class="note_item" v-for="(item,index) in dataList[selIndex].studentNoteList" @tap="toDetail(index)">
				<view class="item_top">
					<image src="../../static/icon_course_detail_tk.png"></image>
					<text>来源:{{item.stuName}}</text>
				</view>
				<view class="item_bottom" v-html="item.content">
		
				</view>
				<view class="date_item">
		
					<text>{{item.createdTime}}</text>
		            <!-- <text @click.stop="toDel(index)">删除</text> -->
				</view>
			</cell>
		</list>
		
		<view class="bottom_div">
			<image  v-if="selIndex!=0"  @click="frontQuestion"  class="bottom_img" src="../../static/icon_before.png"></image>
			<view @click="answerCard" class="bottom_item">
				<image src="../../static/icon_sheet.png"></image>
				<view>答题卡</view>
			</view>
			<view class="bottom_item" @click="collectionQuestion">
				<image src="../../static/icon_collection.png"></image>
				<view>收藏</view>
			</view>
			<image v-if="selIndex!=dataList.length-1"   @click="nextQuestion" class="bottom_img" src="../../static/icon_after.png"></image>
			
		</view>
		
		<view class="pop_div" v-show="cardShow">
			<view class="pop_top_div">
				<view>答题卡</view>
				<list class="index_list">
					<cell v-for="(item,index) in dataList"
					       @tap="toIndex(index)"
						   :class="item.answer?'active':''"
						   >{{index+1}}</cell>					
				</list>
			</view>				    
				<image @click="closeCard" src="../../static/icon_order_close.png"></image>
		</view>
	</view>
</template>

<script>
	export default{
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id;
		},
		data(){
			return{
					id: 0,//上个页面传过来的列表Id
				cardShow:false,//是否显示答题卡
				dataList:[/* {
					"id": 1,
					"title": "C#文件扩展名为",
					"isShow": false,//是否是当前显示的题目
					"isAnswer":true,//是否做过了
					"answer": [{
						"id": 1,
						"option": "A",
						"content": ".txt",
						"isSelected":false//是否选中
					}, {
						"id": 3,
						"option": "F",
						"content": ".class",
						"isSelected":false//是否选中--
					}],
					"succOptionId":[1],//正确答案的选项下标
					"myOptionId":[],//我选择的答案下标
					"succFlag":false,//答案是否正确
				}, {
					"id": 1,
					"title": "C#的基本数据类型",
					"isShow": false,
					"isAnswer":true,//是否做过了
					"answer": [{
						"id": 1,
						"option": "A",
						"content": "int",
						"isSelected":false
					}, {
						"id": 2,
						"option": "B",
						"content": "string",
						"isSelected":false
					}],
					"succOptionId":[1],//正确答案的选项下标不是Id，
					"myOptionId":[1],
					"succFlag":true,//答案是否正确
				} */],
				selIndex: 0, //默认显示的题目下下标
			}
		},
		onReady: function() {
			
			uni.request({
				url: this.baseUrl + 'getWrongTopicList', //获取错题
				method: 'POST',
				data: {
					stuId: uni.getStorageSync('uid'),
					cid:this.id,
					type:2//错题type固定、主要针对章节
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
				},
				success: (res) => {
					console.log(res);
					this.dataList=res.data.topicEntityList;
					
					for (var i = 0; i < this.dataList.length; i++) {
						if (i == this.selIndex) {
							this.dataList[i].show = true;
						} else {
							this.dataList[i].show = false;
						}
					}
					this.text = 'request success';
				}
			});
			
			
			
			
		},
		methods:{
			nextQuestion:function(){								
				//显示下一题
				this.selIndex++;	
				//把下一题的设置成显示
				for (var i = 0; i < this.dataList.length; i++) {
					if (i == this.selIndex) {
						this.dataList[i].show = true;
					} else {
						this.dataList[i].show = false;
					}
				}
				
			},
			frontQuestion:function(){
				//上一题
				//显示上一题
				this.selIndex--;	
				//把上一题的设置成显示
				for (var i = 0; i < this.dataList.length; i++) {
					if (i == this.selIndex) {
						this.dataList[i].show = true;
					} else {
						this.dataList[i].show = false;
					}
				}
			},
			answerCard:function(e){
				//点击打开答题卡
				this.cardShow=true;
			},
			closeCard:function(){
				//关闭答题卡
				this.cardShow=false;
			},
			collectionQuestion:function(){
				//收藏 功能
				//this.dataList[this.selIndex]这是当前这题的数据
				
				
				
				//this.dataList[this.selIndex]这是当前这题的数据
				console.log(this.dataList[this.selIndex].id);
				console.log(this.id);
				console.log(uni.getStorageSync('uid'));
				
				uni.request({
					url: this.baseUrl + 'addCollect', //获取错题
					method: 'POST',
					data: { 
						 'stuId': uni.getStorageSync('uid'),
						 'chapterId':this.id,
						 'topicId':this.dataList[this.selIndex].id,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => { 
						console.log(res);
						uni.showToast({
							title: '提交成功',
							duration: 2000
						});
					}
				});
			},
			addNote:function(){
				var id=this.dataList[this.selIndex].id;				
				//添加笔记
				uni.navigateTo({
					url:'../noteAdd/noteAdd?id='+id
				})
			}
		}
	}
	
</script>

<style>
	.contont{
		padding-bottom: 100rpx;
	}
	.top_div{
		height: 72rpx;
		line-height: 72rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 26rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #E8E8E8;
	}
	.top_div text:nth-child(1){
		color: #e13d2b;
		
	}
	.top_div text:nth-child(2){
		color: #333333;
		
	}
	.question_list{
		
	}
	.question_list .question_item{
		background: #FFFFFF;
		display: block;
		padding-left:20rpx ;
		padding-right: 20rpx;
		
	}
	.question_list .question_item .question_title{
		font-size: 28rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		
	}
	.question_list .question_item .option_list{
		display: flex;
		flex-direction: column;
		
	}
	.question_list .question_item .option_list .option_item{
		height: 96rpx;
		line-height: 96rpx;
	}
	.question_list .question_item .option_list .option_item_active{
		background: #f5f5f5;
	}
	
	.question_list .question_item .option_list .option_item .option_text1{
		background: #cccccc;
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}
	.question_list .question_item .option_list .option_item .succ_bg{
		background:#51c280 ;
	}
	
	.question_list .question_item .option_list .option_item .err_bg{
		background:#e0311e ;
	}
	.question_list .question_item .option_list .option_item text:nth-child(2){
		font-size: 26rpx;
		color: #333333;
		margin-left: 10rpx;
	}
	.result_div{
		margin-left: 20rpx;
		background: #70bf85;
		width: 200rpx;
		height: 66rpx;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		margin-top: 20rpx;
		line-height: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.result_div image{
		width: 34rpx;
		height: 34rpx;
	}
	.result_div text{
		margin-left: 10rpx;
		color: #FFFFFF;
		font-size: 26rpx;
	}
	.resu_view{
		width: 100%;
		background: #ffffff;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		display: flex;

	}
	.resu_view .resu_item{
		flex: 1;
		text-align: center;
		padding-top: 24rpx;
		padding-bottom: 30rpx;
	}
	.resu_view .resu_item .item_title{
		color: #848484;
		font-size: 24rpx;
	}
	.resu_view .resu_item .item_op{
		display: inline-block;
		font-size: 32rpx;
		color: #70bf85;
		margin-top: 20rpx;
		
	}
	.answer_div{
		background: #FFFFFF;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	.answer_div view:nth-child(1){
		font-size: 24rpx;
		color: #848484;
	}
	.answer_div view:nth-child(2){
		font-size: 24rpx;
		color: #333333;
		margin-top: 20rpx;
	}
	.note_div{
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 22rpx;
		color: #333333;
		background: #FFFFFF;
		margin-top: 20rpx;
	}
	.note_div .list_text{
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		flex: 1;
		margin-right: 15rpx;
	}
	.note_div .add_text{
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		flex: 1;
		margin-right: 15rpx;
		border: 1rpx solid #E8E8E8;
		background: #df211f;
		border-radius: 28rpx;
		color: #FFFFFF;
	}
	.bottom_div {
		position: fixed;
		bottom: 0;
		height: 96rpx;
		background: #FFFFFF;
		border-top: 1px solid #DADADA;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
	
	}
	
	.bottom_div .bottom_img {
		display: inline-block;
		height: 80rpx;
		width: 90rpx;
		text-align: center;		
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	
	.bottom_div .bottom_item {
		text-align: center;
		flex: 1;
	}
	
	.bottom_div .bottom_item image {
		width: 34rpx;
		height: 36rpx;
	}
	
	.bottom_div .bottom_item view {
		font-size: 22rpx;
		color: #666666;
	}
	.pop_div{
		background: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;		
		text-align: center;
		padding-right: 20rpx;
	}
	.pop_div image{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: 20rpx;
		text-align: center;
		margin-top: 10rpx;
	}
	.pop_div .pop_top_div{
		position: absolute;
		bottom: 100rpx;
		left: 20rpx;
		right: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		
	
	}
	.pop_div .pop_top_div list{
		display: block;
		width: 100%;
		text-align: left;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.pop_div .pop_top_div list cell{
		width: 62rpx;
		height: 62rpx;
		display: inline-block;
		background: #f3f3f3;
		font-size: 20rpx;
		color: #333333;
		text-align: center;
		line-height: 62rpx;
		margin: 10rpx;
		border-radius: 10rpx;
	} 
	.pop_div .pop_top_div list .active{
		background: #e13b29;
		color: #FFFFFF;
	}
	.pop_div .pop_top_div view{
		margin-top: 20rpx;
		height: 62rpx;
		line-height: 62rpx;
		color: #333333;
		font-size: 28rpx;
		text-align: center;
	}
	.note_list{
		background: #FFFFFF;
		margin-top: 20rpx;
		
	}
	.note_item {
		background: #FFFFFF;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: block;
		
	}
	
	.note_item .item_top {
		font-size: 28rpx;
		color: #222222;
	
	}
	
	.note_item .item_top image {
		height: 36rpx;
		width: 34rpx;
	}
	
	.note_item .item_top text {
		margin-left: 20rpx;
	}
	
	.note_item .item_bottom {
		margin-top: 10rpx;
		color: #888888;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.note_item .item_bottom p {
		display: none;
	}
	
	.note_item .item_bottom p:nth-child(1) {
		display: block;
	
	
	}
	
	.note_item .date_item {
		height: 48rpx;
		color: #888888;
		font-size: 24rpx;
		display: flex;
		line-height: 48rpx;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.note_item .date_item text{
		height: 48rpx;
		line-height: 48rpx;
		display: inline-block;
	}
	
</style>
